<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>综合服务系统</title>
    <!--公用样式-->
    <link rel="stylesheet" type="text/css" href="${re.contextPath}/plugin/common/css/comment.css"/>
    <!--页面样式-->
    <link rel="stylesheet" type="text/css" href="${re.contextPath}/plugin/it/common/css/style.css"/>
    <!--Layui-->
    <link rel="stylesheet" href="${re.contextPath}/plugin/layui/css/layui.css" media="all"/>
    <!--扩展样式-->
    <link rel="stylesheet" href="${re.contextPath}/plugin/common/css/extended.css"/>

    <script type="text/javascript" src="${re.contextPath}/plugin/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="${re.contextPath}/plugin/tools/tool.js"></script>
    <script type="text/javascript" src="${re.contextPath}/plugin/jquery/jquery-3.2.1.min.js"></script>
    <style>
        body {
            position: relative;
        }

        .option div {
            font-size: 14px;
            line-height: 16px;
            padding-top: 4px;
            box-sizing: border-box;
            margin-top: 10px;
        }

        .option div input {
            height: 16px;
            /*margin-top: 4px;*/
        }

        .tipsWord p {
            line-height: 16px;
            margin-top: 15px;
        }

        .question_numbers_list {
            width: 15px;
            height: 15px;
            font-size: 12px;
            line-height: 15px;
            text-align: center;
            border: 1px solid #e0e0e0;
            margin-left: 5px;
            margin-top: 5px;
        }
    </style>
</head>

<script>
    //禁止用F5,ctrl+f5,ctrl+r,f3,ctrl+c,ctrl+v键
    document.onkeydown = function (e) {
        e = window.event || e;
        var k = e.keyCode;
        if ((e.ctrlKey === true && k === 82) || (k === 116)
            || (e.ctrlKey === true && k === 116) || k === 114 || e.ctrlKey === true && k === 67 || e.ctrlKey === true && k === 86) {
            e.keyCode = 0;
            e.returnValue = false;
            e.cancelBubble = true;
            return false;
        }
    }

    //禁止右键弹出菜单
    document.oncontextmenu = function () {
        return false;
    }
</script>

<body>

<#--内容-->
<div class="container">
    <form id="form" action="" enctype="multipart/form-data" method="get">
        <div class="textInfo" style="display: flex;width: 90vw;margin-left: 5vw;height: 90vh;margin-top: 5vh">
            <input style="display: none;" name="startTime" value="${startTime}"/>
            <input id="${ks.examId}" name="examId" value="${ks.examId}" style="display: none;"/>
            <div class="textLeft" style="width: 80%;height: 100%">
                <div style="width: 100%;height: 40px;border-radius: 4px 4px 0 0;background-color: #3e7ce7;text-align: center;color: #FFF;font-weight: bold;">${ks.examName}</div>
                <input name="paperId" value="${paperId}" style="display: none;"/>
                <div class="textContre"
                     style="width: 100%;height: calc(90vh - 40px);overflow-y: auto;border: 1px solid #828282;border-top: 0;border-radius: 4px;box-sizing: border-box;padding: 0 20px 20px">
                    <#list st as item>
                        <div>
                            <input id="${item.quId}" name="exQuList[${item.orderNo}].quId" value="${item.quId}"
                                   style="display: none;"/>
                            <div style="font-size: 14px;margin-top: 20px;overflow: hidden" id="${item.orderNo}">
                                <input class="is_answer" value="false" style="display: none;"/>
                                <input id="qu${item.orderNo}" name="exQuList[${item.orderNo}].answerContent"
                                       value=""
                                       style="display: none;"/>
                                <#if "${item.quType}" == "001">
                                <#--单选-->
                                    <p style="width: 100%;float: left;line-height: 16px;font-weight: bold;" class="st-title"><span>${item.orderNo}
                                            .（选择题）</span>${item.content}</p>
                                    <div class="option" style="width: 85%;float: left">
                                        <#list item.exDxList as dxanswer>
                                            <div>
                                                <input id="${dxanswer.quAnswerId}"
                                                       style="display: none;"/>
                                                <input type="radio" name="${item.orderNo}"
                                                       onclick="check('001',${item.orderNo}, this)"
                                                       value="${dxanswer.answerContent}"> ${dxanswer.answerContent}
                                                、${dxanswer.answerAnalysis?replace("<[^>]*>","","ri")}</div>
                                        </#list>
                                    </div>
                                <#elseif "${item.quType}" == "002">
                                <#--多选-->
                                    <p style="width: 100%;float: left;line-height: 16px;font-weight: bold;" class="st-title"><span>${item.orderNo}
                                            .（选择题）</span>${item.content}</p>
                                    <div class="option" style="width: 85%;float: left">
                                        <#list item.exDuoxList as multchoice>
                                            <div>
                                                <input id="${multchoice.quAnswerId}" style="display: none;"/>
                                                <input type="checkbox" name="${item.orderNo}"
                                                       onclick="check('002',${item.orderNo}, this)"
                                                       value="${multchoice.answerContent}"> ${multchoice.answerContent}
                                                、${multchoice.answerAnalysis?replace("<[^>]*>","","ri")}</div>
                                        </#list>
                                    </div>
                                <#elseif "${item.quType}" == "003">
                                <#--判断-->
                                    <p style="width: 100%;float: left;line-height: 16px;font-weight: bold;" class="st-title"><span>${item.orderNo}
                                            .（判断题）</span>${item.content}</p>
                                    <div class="option" style="width: 85%;float: left">
                                        <#list item.exPdList as judge>
                                            <div>
                                                <input id="${judge.quAnswerId}"
                                                       style="display: none;"/>
                                                <input type="radio" name="${item.orderNo}"
                                                       value="${judge.answerContent}"
                                                       onclick="check('003',${item.orderNo},this)"> ${judge.answerContent?replace("<[^>]*>","","ri")}
                                            </div>
                                        </#list>
                                    </div>
                                <#elseif "${item.quType}" == "004">
                                <#--填空-->
                                    <p style="width: 100%;float: left;line-height: 16px;font-weight: bold;" class="st-title"><span>${item.orderNo}
                                            .（填空题）</span>${item.content}</p>
                                    <div class="option" style="width: 85%;float: left">
                                        <#list item.exTkList as fill>
                                            <div>
                                                <input id="${fill.quAnswerId}"
                                                       style="display: none;"/>${fill.answerAnalysis}
                                                <input type="text"
                                                       name="${item.orderNo}"
                                                       oninput="inputHandle('004',${item.orderNo},this)">
                                            </div>
                                        </#list>
                                    </div>
                                <#elseif "${item.quType}" == "005">
                                <#--填空-->
                                    <p style="width: 100%;float: left;line-height: 16px;font-weight: bold;" class="st-title"><span>${item.orderNo}
                                            .（问答题）</span>${item.content}</p>
                                    <div class="option" style="width: 85%;float: left">
                                        <#--	<#list item.exWdList as text>-->
                                        <div style="width: 100%">
                                            <input id="${item.exWdList[0].quAnswerId}"
                                                   style="display: none;"/>
                                            <textarea placeholder="请输入答案" name="${item.orderNo}"
                                                      oninput="inputHandle('005',${item.orderNo},this)"
                                                      style="width: 600px;background-color: #f2f2f2;height: 200px;resize: none;"></textarea>
                                        </div>
                                        <#--	</#list>-->
                                    </div>
                                </#if>
                            </div>
                        </div>
                    </#list>
                </div>
            </div>
            <div class="textLeft"
                 style="width: 20%;border: 1px solid #828282;margin-left: 10px;border-radius: 4px;position: relative">
                <#--	用户名-->
                <div class="uesrName" style="width: 100%;height: 10vh;display: flex;padding: 10px 5px;">
                    <div style="flex: 0.6;text-align: right;height: 20px;line-height: 20px">
                        <img src="${re.contextPath}/plugin/common/images/username.png" style="width: 20px;height: 20px">
                    </div>
                    <div style="flex: 5;font-size: 14px;padding-left: 5px;height: 20px;line-height: 20px">
                        用户名：${userName}</div>
                </div>
                <#--	考试时间-->
                <div class="userTime" style="width: 100%;height: 10vh;display: flex;padding: 10px 5px;">
                    <div style="flex: 0.6;text-align: right;height: 20px;line-height: 20px">
                        <img src="${re.contextPath}/plugin/common/images/js.png" style="width: 20px;height: 20px">
                    </div>
                    <input id="countdown_input" name="answerTime" style="display: none"/>
                    <div id="countdown"
                         style="flex: 5;font-size: 14px;padding-left: 5px;height: 20px;line-height: 20px">
                        倒计时：59分59秒
                    </div>

                </div>
                <#--试题部分-->
                <div class="userText" style="width: 100%;height: 10vh;padding: 10px 5px;">
                    <div style="height: 20px;line-height: 20px;width: 100%;display: flex">
                        <div style="flex: 0.6;text-align: right;">
                            <img src="${re.contextPath}/plugin/common/images/yztm.png" style="width: 20px;height: 20px"
                                 alt="">
                        </div>
                        <div id="number_questions"
                             style="flex: 5;font-size: 14px;padding-left: 5px;height: 20px;line-height: 20px">
                            <span>已做题目：</span><span id="complete">0</span><span>/${st?size}</span>
                        </div>
                    </div>

                    <div style="width: 100%;display: flex;flex-wrap: wrap;margin-top: 5px">
                        <#list st as item>
                            <a href="##{item.orderNo}" ondragstart="return false">
                                <div class="question_numbers_list"
                                     style="">${item.orderNo}</div>
                            </a>
                        </#list>
                    </div>
                </div>
                <#--	保存  提交按钮-->
                <div style="width: 100%;height: 35px;display: flex;justify-content: space-between;position: absolute;bottom: 30px;font-size: 13px">
<#--                    <div style="width: 45%">-->
<#--                        <a href="javascript:void(0);"><div style="text-align: center;width: 60px;line-height: 30px;border: 1px solid #828282;border-radius: 4px;color: #828282;float:right;"-->
<#--                             onclick="preserve()">-->
<#--                            保存-->
<#--                        </div></a>-->
<#--                    </div>-->
                    <div style="width: 90%;text-align:center ;margin-left: 40%;">
                        <a href="javascript:void(0);"><div style="text-align: center;width: 60px;line-height: 30px;border: 1px solid #3e7ce7;border-radius: 4px;background-color: #3e7ce7;color: #fff;"
                             onclick="submitTest()">交卷
                        </div></a>
                    </div>
                </div>
            </div>
        </div>
    </form>
    <#--未完成提交遮罩层提示-->
    <#--<div style="background: rgba(0,0,0,0.5);width: 100%;height: 100vh;position: fixed;z-index: 5;top: 0;font-size: 15px">-->
    <#--	<div style="width: 360px;height: 250px;background: #fff;position: absolute;top: 150px;right: calc(50% - 180px);border-radius: 4px">-->
    <#--		<div style="width: 100%;height: 55px;line-height: 55px;text-align: center;background: #3e7ce7;color: #FFFFFF">提示</div>-->
    <#--		<div style="width: 100%;height: 125px;line-height: 125px;text-align: center">您还有未完成的试题，确定交卷吗？</div>-->
    <#--		<div style="width: 100%;height: 34px;display: flex;text-align: center">-->
    <#--			<div style="flex: 1">-->
    <#--				<div style="margin: 0 auto;width: 130px;height: 32px;border-radius: 4px;border: 1px solid #828282;color: #828282">取消</div>-->
    <#--			</div>-->
    <#--			<div style="flex: 1">-->
    <#--				<div style="margin: 0 auto;width: 130px;height: 32px;border-radius: 4px;background-color: #3e7ce7;color: #FFFFFF">确定</div>-->
    <#--			</div>-->
    <#--	    </div>-->
    <#--	</div>-->
    <#--</div>-->

    <#--提交完成遮罩层提示-->
    <#--<div style="background: rgba(0,0,0,0.5);width: 100%;height: 100vh;position: fixed;z-index: 5;top: 0;font-size: 15px">-->
    <#--	<div style="width: 370px;height: 350px;background-color: #bad3ff;border-radius: 4px;position: absolute;top: 50px;overflow: hidden;margin-left: calc(50% - 185px)">-->
    <#--		<div style="width: 200px;height: 60px;margin: 60px auto;display: flex">-->
    <#--			<img src="${re.contextPath}/plugin/common/images/1-4.png" style="width: 60px;height: 60px">-->
    <#--			<div style="font-size: 15px">-->
    <#--				<p style="line-height: 16px;margin-top: 5px">是的考试考核练习</p>-->
    <#--				<p style="line-height: 16px;margin-top: 15px">得分：<span style="font-size: 18px;color: #ff5a5a;border-bottom: 1px solid #ff5a5a">0.00分</span></p>-->
    <#--			</div>-->
    <#--		</div>-->
    <#--		<div style="width: 100%;text-align: center">-->
    <#--			<p>总分：100.00分</p>-->
    <#--			<p>及格分：60.00分</p>-->
    <#--			<div style="width: 150px;height: 30px;line-height: 30px;text-align: center;background-color: #3e7ce7;color: #fff;border-radius: 4px;margin: 20px auto">确定</div>-->
    <#--		</div>-->
    <#--	</div>-->
    <#--</div>-->
</div>

<script>
    var form;
    var layer;
    var totalTime; // 总时间 (计算秒数)
    var numlist = document.getElementsByClassName('question_numbers_list');
    var isreply = document.getElementsByClassName('is_answer');
    var completenum = document.getElementById('complete');
    layui.use(['layer', 'form'], function () {
        layer = layui.layer;
        form = layui.form;
    });

    $(function () {
        <#if exstuList??>
        totalTime = ${time} * 60;
        var a = [];
        <#list exstuList as item>
        a.push({
            quId: '${item.quId}',
            serial: '${item.serial}',
            answer: '${item.answer}',
            type: '${item.quType}',
        })
        </#list>
        a.forEach(item => {
            isreply[item.serial - 1].setAttribute('value', 'true');
            numlist[item.serial - 1].style.color = '#3e7ce7';
            numlist[item.serial - 1].style.border = '1px solid #3e7ce7';
            let elem = document.getElementById('qu' + item.serial);
            let brother = elem.parentNode.children[3].children;
            elem.setAttribute('value', item.answer);
            let answer = item.answer.split(',');
            switch (item.type) {
                case '001':
                    for (let i = 0; i < brother.length; i++) {
                        if (contains(answer, brother[i].children[1].value)) {
                            brother[i].children[1].checked = true;
                        } else {
                            brother[i].children[1].checked = false;
                        }
                    }
                    break;
                case '002':
                    for (let i = 0; i < brother.length; i++) {
                        if (contains(answer, brother[i].children[1].value)) {
                            brother[i].children[1].checked = true;
                        } else {
                            brother[i].children[1].checked = false;
                        }
                    }
                    break;
                case '003':
                    for (let i = 0; i < brother.length; i++) {
                        if (contains(answer, brother[i].children[1].value)) {
                            brother[i].children[1].checked = true;
                        } else {
                            brother[i].children[1].checked = false;
                        }
                    }
                    break;
                case '004':
                    for (let i = 0; i < brother.length; i++) {
                        brother[i].children[1].setAttribute('value', answer[i])
                    }
                    break;
                case '005':
                    for (let i = 0; i < brother.length; i++) {
                        brother[i].children[1].value = answer[i];
                    }
                    break;
            }
        })
        <#else>
        totalTime = ${ks.totalTime} * 60;
        </#if>
        numberOfQuestions();
        // 计时器
        let countdown = document.getElementById('countdown');
        let countinput = document.getElementById('countdown_input');
        let minute = parseInt(totalTime / 60); // 计算分钟（取整）
        let second = totalTime % 60; // 计算秒数
        countdown.innerHTML = "倒计时：" + minute + "分钟" + second + "秒";
        countinput.setAttribute('value', minute);
        if(totalTime <= 60){
            let tip = layer.open({
                title:'温馨提示',
                content:'考试还剩1分钟，请考生注意答题时间',
                yes(){
                    layer.close(tip);
                }
            })
        }
        var timer = setInterval(() => {
            if (totalTime > 0) {
                totalTime -= 1;
                minute = parseInt(totalTime / 60);
                second = totalTime % 60;
                countdown.innerHTML = "倒计时：" + minute + "分钟" + second + "秒";
                countinput.setAttribute('value', minute);
            } else {
                clearInterval(timer)
                let index = layer.open({
                    title: "温馨提示",
                    content: "考试已结束，请交卷！",
                    closeBtn: 0,
                    yes: () => {
                        layer.close(index);
                        let data, datas;
                        data = getElements('form');
                        datas = inputSelector(data);
                        let loader = layer.load();
                        layerAjaxGet('/exam/client/insertExam', datas, '', (res) => {
                            if (res.flag) {
                                layer.close(loader);
                                layer.msg("提交成功")
                                if (res.data) {
                                    // 全部为单项选择题，直接返回分数
                                } else {
                                    // 非全为单选，关闭页面
                                    setTimeout(() => {
                                        window.close();
                                    }, 1000)
                                }
                            } else {
                                layer.msg("提交失败")
                            }
                        })
                    }
                })
            }
        }, 1000)
    })

    function numberOfQuestions() {
        var m = 0;
        for (let i = 0; i < isreply.length; i++) {
            if (isreply[i].value == 'true') {
                m += 1;
            }
            completenum.innerHTML = m.toString();
        }
    }

    function contains(arr, val) {
        let i = arr.length;
        while (i--) {
            if (arr[i] == val) {
                return true;
            }
        }
        return false;
    }

    // 选择题、判断题 获取填写的答案
    function check(type, index, a) {
        let elem = document.getElementById('qu' + index);
        isreply[index - 1].setAttribute('value', 'true');
        switch (type) {
            // 单选题
            case '001':
                elem.setAttribute('value', a.value);
                numlist[index - 1].style.color = '#3e7ce7';
                numlist[index - 1].style.border = '1px solid #3e7ce7';
                break;
            //多选题
            case '002':
                let checkarr = [];
                let parentelem = a.parentNode.parentNode;
                let answerelem = parentelem.getElementsByTagName('div');
                for (let i = 0; i < answerelem.length; i++) {
                    let checkinput = answerelem[i].childNodes[3].checked;
                    if (checkinput) {
                        checkarr[i] = answerelem[i].childNodes[3].value;
                    } else {
                        checkarr[i] = "";
                    }
                }
                checkarr = checkarr.filter(Boolean);
                if (checkarr.length === 0) {
                    elem.setAttribute('value', '');
                    isreply[index - 1].setAttribute('value', 'false');
                    numlist[index - 1].style.color = '#000';
                    numlist[index - 1].style.border = '1px solid #e0e0e0';
                } else {
                    elem.setAttribute('value', checkarr.join());
                    numlist[index - 1].style.color = '#3e7ce7';
                    numlist[index - 1].style.border = '1px solid #3e7ce7';
                }
                break;
            // 判断题
            case '003':
                elem.setAttribute('value', a.value);
                numlist[index - 1].style.color = '#3e7ce7';
                numlist[index - 1].style.border = '1px solid #3e7ce7';
                break;
        }
        numberOfQuestions();
    }

    // 文字题获取填写的答案
    function inputHandle(type, index, a) {
        let elem = document.getElementById('qu' + index);
        isreply[index - 1].setAttribute('value', 'true');
        switch (type) {
            // 填空题
            case '004':
                let fillarr = [];
                let parentelem = a.parentNode.parentNode;
                let answerelem = parentelem.getElementsByTagName('div');
                for (let i = 0; i < answerelem.length; i++) {
                    fillarr[i] = answerelem[i].childNodes[3].value;
                }
                if (fillarr.filter(Boolean).length === 0) {
                    elem.setAttribute('value', '');
                    isreply[index - 1].setAttribute('value', 'false');
                    numlist[index - 1].style.color = '#000';
                    numlist[index - 1].style.border = '1px solid #e0e0e0';
                } else {
                    elem.setAttribute('value', fillarr.join());
                    numlist[index - 1].style.color = '#3e7ce7';
                    numlist[index - 1].style.border = '1px solid #3e7ce7';
                }
                break;
            // 简答题
            case '005':
                // 判断值是否为空，改变题号样式
                if (a.value !== '') {
                    numlist[index - 1].style.color = '#3e7ce7';
                    numlist[index - 1].style.border = '1px solid #3e7ce7';
                } else {
                    isreply[index - 1].setAttribute('value', 'false');
                    numlist[index - 1].style.color = '#000';
                    numlist[index - 1].style.border = '1px solid #e0e0e0';
                }
                elem.setAttribute('value', a.value);
                break;
        }
        numberOfQuestions();
    }

    // 获取表单内的iput
    function getElements(formId) {
        let form = document.getElementById(formId);
        let elements = new Array();
        let tagElements = form.getElementsByTagName('input');
        for (let j = 0; j < tagElements.length; j++) {
            elements.push(tagElements[j]);
        }
        return elements;
    }

    // 将获取的具名input返回 name:value 形式的Object
    function inputSelector(element) {
        let obj = {};
        for (let i = 0; i < element.length; i++) {
            if (element[i].name) {
                let name = element[i].name;
                let val = element[i].value;
                let objchild = {[name]: val}
                Object.assign(obj, objchild)
            }
        }
        return obj
    }

    // 保存
    function preserve() {
        let data, datas;
        data = getElements('form');
        datas = inputSelector(data);
        console.log(datas);
        let loader = layer.load();
        layerAjaxGet('/exam/client/insertSaveExam', datas, '', res => {
            if (res.flag) {
                layer.close(loader)
                layer.open({
                    title: "温馨提示",
                    content: "保存成功，是否离开此页？",
                    yes: () => {
                        setTimeout(() => {
                            window.close();
                        }, 1000)
                    }
                })
            }
        })
    }

    // 交卷
    function submitTest() {
        // debugger;
        let data, datas, context;
        let isall = true;
        let isAllNull = true;
        data = getElements('form');
        datas = inputSelector(data);
        /*当提交时，题目全部都没有做，不准提交，最少提交一道题目*/
        for (let i = 0; i < isreply.length; i++) {
            if (isreply[i].value === "false") {
                isall = false;
            }else { /*这里是当存在true时，执行*/
                isAllNull = false;
            }
        }

        // console.log('a');
        if (isall) {
            context = "你确认要交卷吗？"
        }else{
            if (isAllNull){
                /*全控提示，不让保存*/
                let isAllNull = layer.open({
                    title: "温馨提示",
                    content: '至少提交一道题目！',
                    btn:['确定'],
                    yes: () => {
                        layer.close(isAllNull);
                    }
                });
                return;
            }
            context = "你还有未完成的题目，确定交卷吗？"
        }

        let index = layer.open({
            title: "温馨提示",
            content: context,
            btn:['确定','取消'],
            yes: () => {
                layer.close(index);
                let loader = layer.load();
                layerAjax('/exam/client/insertExam', datas, '', (res) => {
                    if (res.flag) {
                        layer.close(loader);
                        layer.msg("提交成功")
                        if (res.data) {
                            // 全部为单项选择题，直接返回分数
                        } else {
                            // 非全为单选，关闭页面
                            setTimeout(() => {
                                window.close();
                            }, 2000)
                        }
                    } else {
                        layer.msg("提交失败")
                    }
                })
            }
        })
    }
</script>
</body>

</html>
